<template>
  <div class="searh">
    <div class="searchHeader">
      <div class="headerLeft" @click="toIndex()">
        <van-icon name="arrow-left" size="25" />
      </div>
      <div class="headerRight">
        <form action="/">
          <van-search
              v-model="value"
              show-action
              placeholder="请输入搜索关键词"
              @search="onSearch"
              @cancel="onCancel">
            <template #action>
              <div @click="onSearch()">搜 索</div>
            </template>
          </van-search>
        </form>
      </div>
    </div>
    <div class="historySearch">
      <p style="font-size: 18px">历史搜索</p>
      <ul>
        <li>黄河风景区</li>
        <li>羊肉汤</li>
        <li>河南大学</li>
        <li>升达大学</li>
        <li>郑州东站</li>
      </ul>
    </div>
  </div>

</template>

<script>
export default {
  name: "SearchPage",
  data() {
    return {
      value: '',
    }
  },
  methods: {
    toIndex() {
      this.$router.push("/")
    },
    onSearch(val) {

    },
    onCancel() {

    }
  }
}
</script>

<style scoped>
.searchHeader {
  display: flex;
  justify-content: space-between;
}
.headerLeft {
  width: 6%;
  text-align: center;
  height: 54px;
  line-height: 70px;
}
.headerRight {
  width: 94%;
}

.historySearch ul {
  display: flex;
  text-align: center;
}

</style>